<template>
   <div class="header">
       <img src="../../assets/image/index/header-bg.jpg" alt="">
       <p class="p1">原料商销售、贸易商转型解决方案</p>
       <div  class="p2"><p>实行原材料贸易商、原材料品牌商双向征集，服务涂料厂商 以平台为中枢，重构渠道合作模式，实现三方受益  </p></div>
       <div class="enter-now">立即加入 ></div>
       <div class="icon-area">
                   <div class="icon-item search-icon"><img src="@/assets/image/supply/search-icon.png" alt=""></div>
                   <div class="icon-item user-icon"><img src="@/assets/image/supply/user-icon.png" alt=""></div>
                   <div class="icon-item menu-icon"><img src="@/assets/image/supply/menu-icon.png" alt=""></div>
        </div>
   </div>
</template>

<script>
export default {
   name: '',
   data() {
       return {}
   },
  components: {}
}
</script>

<style scoped lang="less">
    .header{
        position: relative;
    img{
        width: 100%;
        height: 4.9rem;
    }
    .p1{
        font-size: 0.36rem;
        color: #d4aa58;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 1.8rem;
        white-space: nowrap;
    }
    .p2{
        position: absolute;
        top: 2.45rem;
        margin: 0 auto;
        // left: 50%;
        // transform: translateX(-50%);
        p{
            font-size: 0.24rem;
            transform: scale(4/5);
            width: 100%;
            text-align: center;
            
            color: white;
        }
    }
    .enter-now{
        text-align: center;
        line-height: 0.55rem;
        font-size: 0.24rem;
        width: 2.1rem;
        height: 0.55rem;
        color: #d4aa58;
        border: 0.01rem solid #645532;
        position: absolute;
        bottom: 0.9rem;
        left: 50%;
        transform: translateX(-50%);
    }
        .icon-area{
            position: absolute;
            top: 0.28rem;
            right: 0.44rem;
            width: 1.7rem;
            height: 0.4rem;
            display: flex;
            justify-content: space-between;
            .icon-item{
                img{
                    width: 0.38rem;
                    height: 0.38rem;
                }
        
    }
}

    }
</style>
